<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="员工姓名">
<input type="text" placeholder="员工年龄">
<input type="text" placeholder="员工工资">
<input type="text" placeholder="员工职位">
<input type="button" value="添加">
<hr>
<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>工资</td>
        <td>职位</td>
        <td>操作</td>
    </tr>
</table>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    //给按钮添加点击事件
    $('input:last').click(function () {
        //创建tr和td 并把用户输入的内容添加到td里面
        let tr = $('<tr></tr>')
        let nametd = $('<td></td>')
        let agetd = $('<td></td>')
        let saltd = $('<td></td>')
        let jobtd = $('<td></td>')
        let deltd = $('<td><input type="button" value="删除"></td>')
        //得到删除td里面的删除按钮添加点击事件
        deltd.children().click(function () {
            tr.remove()//删除当前行
            //得到点击按钮的父元素td的父元素tr 删除
            // $(this).parent().parent().remove()
        })
        //把用户输入的内容  添加到td里面
        nametd.text($('input:eq(0)').val())
        agetd.text($('input:eq(1)').val())
        saltd.text($('input:eq(2)').val())
        jobtd.text($('input:eq(3)').val())

        //把td装进tr
        tr.append(nametd)
        tr.append(agetd)
        tr.append(saltd)
        tr.append(jobtd)
        tr.append(deltd)
        //把tr装进table
        $('table').append(tr)
    })
</script>
</body>
</html>